<div
  class="layout-toolbar inline-flex justify-end items-center"
  #toolbar
  (click)="hiddenWidgetPicker()"
>
  <app-btn
    [matMenuTriggerFor]="menu"
    class="toggle block"
    #myMenu
    matTooltip="配置当前栏"
    matTooltipPosition="above"
    [content]="{
      label: '',
      mode: 'icon',
      icon: { svg: 'tune-vertical-variant' },
    }"
  />
  @let elements = lbContent.elements;
  <mat-menu #menu="matMenu" class="layout-toolbar-menu">
    <button
      [disabled]="!(i > 0 && i < elements.length)"
      mat-menu-item
      (click)="onMoveCol('left', elements, toolbar, i)"
    >
      <div class="flex items-center">
        <app-icon [content]="{ svg: 'chevron-left' }"></app-icon>
        <span>左移</span>
      </div>
    </button>
    <button
      mat-menu-item
      [disabled]="!(i > -1 && i < elements.length - 1)"
      (click)="onMoveCol('right', elements, toolbar, i)"
    >
      <div class="flex items-center">
        <app-icon [content]="{ svg: 'chevron-right' }"></app-icon>
        <span>右移</span>
      </div>
    </button>
    <mat-divider />
    <button mat-menu-item (click)="addBlock('layout', lbContent)">
      <div class="flex items-center">
        <app-icon [content]="{ svg: 'plus' }"></app-icon>
        <span>选择组件插入新一栏</span>
      </div>
    </button>
    <button mat-menu-item (click)="onDeleteRow(toolbar)">
      <div class="flex items-center">
        <app-icon [content]="{ svg: 'close' }"></app-icon>
        <span>移除当前栏</span>
      </div>
    </button>
    <mat-divider />
    <button mat-menu-item (click)="onLayoutSettings(layout, toolbar)">
      <div class="flex items-center">
        <app-icon [content]="{ svg: 'responsive' }"></app-icon>
        <span>当前栏配置</span>
      </div>
    </button>
  </mat-menu>
</div>
